<template>
  <div>
    <a-table :columns="columns" :data-source="data" bordered>
      <template slot="name" slot-scope="text">
        <a>{{ text }}</a>
      </template>
      <template slot="title" >
        专业技能管理
      </template>
      <template slot="footer" >
      </template>
    </a-table>
  </div>
</template>
<script>
import bus from './eventBus';


const columns = [
  {
    title: '序号',
    dataIndex: 'number2',
    scopedSlots: { customRender: 'number2' },
  },
  {
    title: '状态',
    dataIndex: 'state',
  },
  {
    title: '技能名称',
    dataIndex: 'skillName',
  },
  {
    title: '使用日期',
    dataIndex: 'useDate',
  },
  {
    title: '使用时间(月)',
    dataIndex: 'useMouth',
  },
  {
    title: '熟练程度',
    dataIndex: 'content',
  },
  {
    title: '备注',
    dataIndex: 'remarked',
  },
];
const data = [];
for(let i = 1;i < 4; i++) {
  data.push({
    number:i.toString(),
    state:'',
    skillName:'',
    useDate:'',
    useMouth:'',
    content:'',
    remarked:'',
  });
}
export default {
  created() {
    bus.$on("skillChange",(state,skillName,useDate,useMouth,content,remarked) => {
      this.data.push({
        state:state,
        skillName:skillName,
        useDate:useDate,
        useMouth:useMouth,
        content:content,
        remarked:remarked
      })
      console.log(this.data)
    })
  },
  data() {
    return {
      data,
      columns,
    };
  },
};
</script>
<style>
th.column-money,
td.column-money {
  text-align: right !important;
}
.choose{
  line-height: 7;
  width:200px;
  height:100px;
  float: left;
}
.button{
  text-align: left;
  width: 200px;
}
</style>